import React from 'react'
import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { navRoutes, tabRoutes } from './routes'

const Stack = createNativeStackNavigator()
const Tab = createBottomTabNavigator()

export default function AppRoutes() {
    //从子导航器获取路由名称
    const getChildTitle = (route: any) => {
        const routeName = getFocusedRouteNameFromRoute(route)
        return routeName
    }

    const TabNavigator = () => {
        return (
            <Tab.Navigator>
                {tabRoutes.map((item, index) => {
                    return (
                        <Tab.Screen
                            key={index}
                            name={item.name}
                            component={item.component}
                            options={({ route }) => ({
                                title: getChildTitle(route) || item.title,
                                headerStyle: {
                                    backgroundColor: '#fff'
                                },
                                headerTitleStyle: {
                                    color: '#000'
                                },
                                headerShown: false, // false 不显示头部标题
                                tabBarLabel: item.title
                                // tabBarIcon: ({ color, size }) => <Ionicons name={item.icon} color={color} size={size} />
                            })}
                        />
                    )
                })}
            </Tab.Navigator>
        )
    }

    const StackNavigator = () => {
        return (
            <Stack.Navigator>
                {navRoutes.map((item, index) => {
                    return (
                        <Stack.Screen
                            key={index}
                            name={item.name}
                            component={item.component}
                            options={({ route }) => ({
                                title: getChildTitle(route) || item.title,
                                headerStyle: {
                                    backgroundColor: '#fff'
                                },
                                headerTitleStyle: {
                                    color: '#000'
                                },
                                headerShown: item.headerShown // false 不显示头部标题
                            })}
                        />
                    )
                })}
                <Stack.Screen
                    name={'home'}
                    component={TabNavigator}
                    options={({ route }) => ({
                        title: getChildTitle(route) || 'home',
                        headerStyle: {
                            backgroundColor: '#fff'
                        },
                        headerTitleStyle: {
                            color: '#000'
                        },
                        headerShown: false // false 不显示头部标题
                    })}
                />
            </Stack.Navigator>
        )
    }

    return (
        <NavigationContainer>
            <StackNavigator />
        </NavigationContainer>
    )
}
